<template>
	<div class="chat-item" :class="{ 'active': active, 'has-unread': !chat.isDnd && chat.unreadCount > 0 }"
		 @contextmenu.prevent="showRightMenu($event)">
		<div class="chat-left">
			<div class="avatar-container">
				<!-- 根据聊天类型传递不同的type和id，确保群聊和私聊头像缓存分离 -->
				<head-image
					:url="chat.headImage"
					:name="chat.showName"
					:size="44"
					:id="chat.targetId"
					:type="chat.type == 'PRIVATE' ? 'user' : 'group'"
					:isShowUserInfo="chat.type == 'PRIVATE'"></head-image>
				<!-- 未读消息红点 - 确保在最顶层 -->
				<div v-show="!chat.isDnd && chat.unreadCount > 0" class="unread-badge">
					<span class="unread-count">{{ chat.unreadCount > 99 ? '99+' : chat.unreadCount }}</span>
				</div>
			</div>
		</div>
		<div class="chat-right">
			<div class="chat-name">
				<div class="chat-name-text">
					<span class="name-text">{{ chat.showName }}</span>
					<el-tag v-if="chat.type == 'GROUP'" size="mini" class="group-tag">群</el-tag>
				</div>
				<div class="chat-time-text">{{ showTime }}</div>
			</div>
			<div class="chat-content">
				<div class="content-left">
					<div class="chat-at-text" v-if="atText">{{ atText }}</div>
					<div class="chat-send-name" v-show="isShowSendName">{{ chat.sendNickName }}:&nbsp;</div>
					<div class="chat-content-text" v-html="$emo.transform(chat.lastContent, 'emoji-small')"></div>
				</div>
				<div class="content-right">
					<div class="dnd-icon" v-if="chat.isDnd" title="消息免打扰">
						<i class="fas fa-bell-slash"></i>
					</div>
				</div>
			</div>
		</div>
		<right-menu ref="rightMenu" @select="onSelectMenu"></right-menu>
	</div>
</template>

<script>
import HeadImage from '../common/HeadImage.vue';
import RightMenu from '../common/RightMenu.vue';

export default {
	name: "chatItem",
	components: {
		HeadImage,
		RightMenu
	},
	data() {
		return {
		}
	},
	props: {
		chat: {
			type: Object
		},
		active: {
			type: Boolean
		}
	},
	methods: {
		showRightMenu(e) {
			this.$refs.rightMenu.open(e, this.menuItems);
		},
		onSelectMenu(item) {
			this.$emit(item.key.toLowerCase(), this.chat);
		}
	},
	computed: {
		isShowSendName() {
			if (!this.chat.sendNickName) {
				return false;
			}
			let size = this.chat.messages.length;
			if (size == 0) {
				return false;
			}
			// 只有群聊的普通消息需要显示名称，但混合消息不显示发送者名称
			let lastMsg = this.chat.messages[size - 1];
			return this.$msgType.isNormal(lastMsg.type) && lastMsg.type !== this.$enums.MESSAGE_TYPE.MIXED;
		},
		showTime() {
			return this.$date.toTimeText(this.chat.lastSendTime, true)
		},
		atText() {
			if (this.chat.atMe) {
				return "[有人@我]"
			} else if (this.chat.atAll) {
				return "[@全体成员]"
			}
			return "";
		},
		menuItems() {
			let items = [];

			// 置顶功能
			items.push({
				key: 'TOP',
				name: '置顶聊天',
				icon: 'fas fa-thumbtack'
			});

			// 免打扰功能
			if (this.chat.isDnd) {
				items.push({
					key: 'DND',
					name: '取消免打扰',
					icon: 'fas fa-bell'
				})
			} else {
				items.push({
					key: 'DND',
					name: '消息免打扰',
					icon: 'fas fa-bell-slash'
				})
			}

			// 删除聊天
			items.push({
				key: 'DELETE',
				name: '删除聊天',
				icon: 'fas fa-trash-alt',
				color: '#F56C6C'
			})

			return items;
		}
	}
}
</script>

<style lang="scss" scoped>
@use "@/styles/variables.scss" as *;

.chat-item {
	height: 68px;
	display: flex;
	position: relative;
	padding: var(--im-spacing-sm) var(--im-spacing-lg);
	align-items: center;
	background-color: var(--im-bg-primary);
	white-space: nowrap;
	cursor: pointer;
	transition: all var(--im-transition-base);
	border-radius: var(--im-border-radius-base);
	margin: 2px var(--im-spacing-xs);

	// 悬停效果
	&:hover {
		background-color: var(--im-bg-secondary);
		transform: translateX(2px);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	// 激活状态
	&.active {
		background-color: var(--im-color-primary);
		color: white;
		box-shadow: 0 4px 12px rgba(var(--im-color-primary-rgb), 0.3);

		.chat-time-text,
		.chat-send-name,
		.chat-content-text {
			color: rgba(255, 255, 255, 0.9) !important;
		}

		.chat-at-text {
			color: #ffeb3b !important;
		}

		.group-tag {
			background-color: rgba(255, 255, 255, 0.2) !important;
			color: white !important;
			border-color: transparent !important;
		}

		.dnd-icon {
			color: rgba(255, 255, 255, 0.8) !important;
		}
	}

	// 有未读消息时的样式
	&.has-unread {
		&:not(.active) {
			background-color: var(--im-bg-tertiary);
			border-left: 3px solid var(--im-color-primary);
		}
	}

	.chat-left {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: var(--im-spacing-lg);

		.avatar-container {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			// 未读消息红点 - 确保在最顶层
			.unread-badge {
				position: absolute;
				top: -6px;
				right: -6px;
				z-index: 1000; // 确保在最顶层
				background: linear-gradient(135deg, #ff4757, #ff3838);
				border-radius: 12px;
				min-width: 18px;
				height: 18px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 2px solid var(--im-bg-primary);
				box-shadow: 0 2px 6px rgba(255, 71, 87, 0.4);
				animation: pulse-badge 2s infinite;

				.unread-count {
					color: white;
					font-size: 10px;
					font-weight: 600;
					line-height: 1;
					padding: 0 3px;
					white-space: nowrap;
				}

				// 当数字较大时调整样式
				&:has(.unread-count:contains('99+')) {
					min-width: 22px;
					border-radius: 11px;
				}
			}
		}
	}


	.chat-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		text-align: left;
		overflow: hidden;
		min-width: 0; // 确保flex子元素能正确收缩

		.chat-name {
			display: flex;
			align-items: center;
			line-height: 22px;
			height: 22px;
			margin-bottom: var(--im-spacing-xs);

			.chat-name-text {
				flex: 1;
				display: flex;
				align-items: center;
				min-width: 0; // 确保能正确收缩

				.name-text {
					font-size: var(--im-font-size-base);
					font-weight: 500;
					color: var(--im-text-color-primary);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-right: var(--im-spacing-xs);
				}

				.group-tag {
					min-width: 24px;
					height: 18px;
					text-align: center;
					border-radius: 9px;
					border: 1px solid var(--im-color-primary);
					background-color: rgba(var(--im-color-primary-rgb), 0.1);
					color: var(--im-color-primary);
					font-size: 10px;
					font-weight: 600;
					line-height: 16px;
					flex-shrink: 0;
					transition: all var(--im-transition-base);

					&:hover {
						background-color: var(--im-color-primary);
						color: white;
					}
				}
			}

			.chat-time-text {
				font-size: var(--im-font-size-sm);
				color: var(--im-text-color-secondary);
				white-space: nowrap;
				flex-shrink: 0;
				margin-left: var(--im-spacing-sm);
			}
		}

		.chat-content {
			display: flex;
			align-items: center;
			line-height: 20px;
			min-width: 0; // 确保能正确收缩

			.content-left {
				flex: 1;
				display: flex;
				align-items: center;
				min-width: 0; // 确保能正确收缩

				.chat-at-text {
					color: var(--im-color-danger);
					font-size: var(--im-font-size-sm);
					font-weight: 600;
					margin-right: var(--im-spacing-xs);
					flex-shrink: 0;
					background: rgba(var(--im-color-danger-rgb), 0.1);
					padding: 2px 6px;
					border-radius: 10px;
					border: 1px solid rgba(var(--im-color-danger-rgb), 0.2);
				}

				.chat-send-name {
					font-size: var(--im-font-size-sm);
					color: var(--im-text-color-secondary);
					flex-shrink: 0;
					margin-right: 2px;
				}

				.chat-content-text {
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: var(--im-font-size-sm);
					color: var(--im-text-color-secondary);
					min-width: 0; // 确保能正确收缩

					// 表情符号样式
					:deep(.emoji-small) {
						width: 16px;
						height: 16px;
						vertical-align: middle;
						margin: 0 1px;
					}
				}
			}

			.content-right {
				display: flex;
				align-items: center;
				flex-shrink: 0;
				margin-left: var(--im-spacing-xs);

				.dnd-icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 20px;
					height: 20px;
					color: var(--im-text-color-secondary);
					font-size: 12px;
					opacity: 0.7;
					border-radius: 50%;
					transition: all var(--im-transition-base);

					i {
						transition: all var(--im-transition-base);
					}

					&:hover {
						background-color: rgba(var(--im-color-warning-rgb), 0.1);
						color: var(--im-color-warning);
						opacity: 1;
						transform: scale(1.1);
					}
				}
			}
		}
	}
}

// 红点脉冲动画
@keyframes pulse-badge {
	0% {
		transform: scale(1);
		box-shadow: 0 2px 6px rgba(255, 71, 87, 0.4);
	}
	50% {
		transform: scale(1.05);
		box-shadow: 0 4px 12px rgba(255, 71, 87, 0.6);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 2px 6px rgba(255, 71, 87, 0.4);
	}
}

// 深色模式适配
:root[data-theme='dark'] {
	.chat-item {
		&:hover {
			box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
		}

		&.active {
			box-shadow: 0 4px 12px rgba(var(--im-color-primary-rgb), 0.4);
		}

		.unread-badge {
			border-color: var(--im-bg-primary);
			box-shadow: 0 2px 6px rgba(255, 71, 87, 0.6);
		}
	}
}
</style>
